<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">

    <script src="../../dist/mermaid.js"></script>
    <link rel="stylesheet" href="../../dist/mermaid.css"/>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

    <style>
        .cluster {
            fill: #fcac93;
            rx: 4px;
            stroke: grey;
        }

        .cssClass > rect {
            fill: #FF0000;
            stroke: #FFFF00;
            stroke-width: 4px;
        }
    </style>
    <link rel="stylesheet" href="../../dist/mermaid.forest.css"/>
</head>
<body style="height:100%">
<h1>Rendering</h1>
A should have a red background with styling from class.

<script>
    mermaidAPI.initialize({
        startOnLoad: true,
        logLevel: 1
    });

</script>
<div class="mermaid" style="height:500px;">
    classDiagram
    Class01 <|-- AveryLongClass : Cool
    Class03 *-- Class04
    Class05 o-- Class06
    Class07 .. Class08
    Class09 --> C2 : Where am i?
    Class09 --* C3
    Class09 --|> Class07
    Class07 : equals()
    Class07 : Object[] elementData
    Class01 : size()
    Class01 : int chimp
    Class01 : int gorilla
    Class08 <--> C2: Coola label
</div>


<svg id="mermaidChart10" style="display:none" width="100%" height="500" xmlns="http://www.w3.org/2000/svg">
    <style type="text/css" title="mermaid-svg-internal-css">/*  */
    text {
        font-family: 'trebuchet ms', verdana, arial;
        font-size: 14px;
    }

    text {
        font-family: 'trebuchet ms', verdana, arial;
        font-size: 14px;
    }

    /*  */
    </style>
    <g transform="translate(0,0)">
        <rect x="0" y="0" fill="yellow" width="115.5625" height="26.65625"></rect>
        <text x="10" y="17" fill="darkblue" class="classText">AveryLongClass</text>
    </g>
    <g transform="translate(200,0)">
        <rect rx="0" ry="0" fill="grey" width="115.5625" height="26.65625"></rect>
        <text x="10" y="17" fill="darkblue" class="classText">AveryLongClass</text>
    </g>
</svg>

</body>
</html>
